<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环球甄选</title>
  <link rel="stylesheet" href="./static/css/common.css">
  <link rel="stylesheet" href="./static/css/skin.css">
  <link rel="stylesheet" href="./static/swiper/swiper.min.css">
  <script src="./static/jquery/jquery-1.11.3.min.js"></script>
  <script src="./static/swiper/swiper.min.js"></script>
</head>

<body>
  <div id="wrapper">
    <div class="user-profile">
      <div class="bg"></div>
      <div class="inner">
        <div class="avatar">
          <div class="img">
            <img src="./static/imgs/4.png" alt="">
          </div>
          <div class="icon">
            <img src="./static/icon/22.png" alt="">
          </div>
        </div>
        <div class="exp">
          <div class="name">
            <span>18800001688</span>
          </div>
          <dl class="tags">
            <dd>
              <span>H7 寰球皇冠</span>
            </dd>
            <dd>
              <span>服务商</span>
            </dd>
          </dl>
          <dl class="int">
            <dd class="vip">
              <img src="./static/icon/26.png" alt="">
              <span>升级会员</span>
            </dd>
            <dd class="svip">
              <img src="./static/icon/27.png" alt="">
              <span>升级VIP会员</span>
            </dd>
          </dl>
        </div>
      </div>
      <div class="share">
        <img src="./static/icon/8.png" alt="">
        <span>分享</span>
      </div>
    </div>
    
    <div class="user-account">
      <div class="inner">
        <div class="user-thead">
          <div class="name">
            <span>我的账户</span>
          </div>
          <div class="icon" id="userAccountToggle">
            <img src="./static/icon/13.png" alt="">
            <span>隐藏</span>
          </div>
        </div>
        <dl class="tbody" id="userAccountList">
          <dd class="rows">
            <strong data-num="￥999.99">￥999.99</strong>
            <span>我的余额</span>
          </dd>
          <dd class="rows">
            <strong data-num="99">99</strong>
            <span>购物积分</span>
          </dd>
          <dd class="rows">
            <strong data-num="8000">8000</strong>
            <span>我的甄宝</span>
          </dd>
        </dl>
      </div>
    </div>
    
    <div class="user-order">
      <div class="user-thead">
        <div class="name">
          <span>我的订单</span>
        </div>
      </div>
      <dl class="tbody">
        <dd class="rows">
          <img src="./static/icon/9.png" alt="">
          <span>待付款</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/10.png" alt="">
          <span>待发货</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/11.png" alt="">
          <span>待收货</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/12.png" alt="">
          <span>已完成</span>
        </dd>
      </dl>
    </div>
    
    <div class="user-service">
      <div class="user-thead">
        <div class="name">
          <span>我的服务</span>
        </div>
      </div>
      <dl class="tbody">
        <dd class="rows">
          <img src="./static/icon/17.png" alt="">
          <span>我的社区</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/14.png" alt="">
          <span>邀请好友</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/15.png" alt="">
          <span>联系客服</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/16.png" alt="">
          <span>素材中心</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/18.png" alt="">
          <span>续费提醒</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/19.png" alt="">
          <span>GS数据</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/20.png" alt="">
          <span>成长俱乐部</span>
        </dd>
        <dd class="rows">
          <img src="./static/icon/21.png" alt="">
          <span>设置</span>
        </dd>
      </dl>
    </div>

    <!-- other -->
  </div>

  <div id="fixedBar">
    <div class="inner">
      <dl class="list">
        <dd class="item">
          <div class="img">
            <img src="./static/icon/3.png" alt="">
          </div>
          <div class="name">
            <span>首页</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/4.png" alt="">
          </div>
          <div class="name">
            <span>商城</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/5.png" alt="">
          </div>
          <div class="name">
            <span>甄聊</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/6.png" alt="">
          </div>
          <div class="name">
            <span>乐园</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/7.png" alt="">
          </div>
          <div class="name">
            <span>我的</span>
          </div>
        </dd>
      </dl>
    </div>
  </div>

  <div class="share-dialog" id="shareDialog">
    <div class="mask"></div>
    <div class="layer">
      <div class="thead">
        <h3>联系客服</h3>
      </div>
      <div class="tbody">
        <div class="img">
          <img src="./static/imgs/5.png" />
        </div>
        <div class="desc">
          <p>长按识别二维码联系客服小甄</p>
          <h4>环球甄选</h4>
        </div>
      </div>
    </div>
  </div>

  <script src="./static/js/action.js"></script>
  
  <script>
    $('#userAccountToggle').on('click', function() {
      $('#userAccountToggle').toggleClass('is-hidden');
      if ($('#userAccountToggle').hasClass('is-hidden')) {
        $('#userAccountToggle').html(`
          <img src="./static/icon/13b.png" alt="">
          <span>显示</span>
        `)
        $('#userAccountList .rows').each(function() {
          const num = $(this).find('strong').data('num');
          $(this).find('strong').text(`***`);
        });
      } else {
        $('#userAccountToggle').html(`
          <img src="./static/icon/13.png" alt="">
          <span>隐藏</span>
        `)
        $('#userAccountList .rows').each(function() {
          const num = $(this).find('strong').data('num');
          $(this).find('strong').text(`${num}`);
        });
      }
    });
  </script>
</body>
</html>
